<template>
	<!-- <el-switch v-model="globalStore.isDark" inline-prompt :active-icon="Sunny" :inactive-icon="Moon" @click="toggleTheme"/> -->
	<div class="toolbar-link" @click="toggleTheme">
		<label class="dark-mode" :class="globalStore.isDark?'':'is-checked'">
			<input data-cy="dark-mode-toggle" type="checkbox">
			<span></span>
		</label>
	</div>
</template>

<script setup lang="ts" name="SwitchDark">
	import { useTheme } from "@/hooks/useTheme";
	import { storeToRefs } from "pinia";
	import { useGlobalStore } from "@/stores/modules/global";
	//import { Sunny, Moon } from "@element-plus/icons-vue";

	const { switchDark } = useTheme();
	const globalStore = useGlobalStore();
	const { isDark } = storeToRefs(globalStore);
	const toggleTheme = (event : MouseEvent) => {
		event.preventDefault()
		console.log(globalStore.isDark)
		globalStore.isDark = !globalStore.isDark
		const x = event.clientX;
		const y = event.clientY;
		const endRadius = Math.hypot(
			Math.max(x, innerWidth - x),
			Math.max(y, innerHeight - y)
		);
		let isDarkVal = isDark.value;
		if (!document.startViewTransition) {
			switchDark()
			return;
		}
		// @ts-ignore
		const transition = document.startViewTransition(() => {
			switchDark()
		});

		transition.ready.then(() => {
			const clipPath = [
				`circle(0px at ${x}px ${y}px)`,
				`circle(${endRadius}px at ${x}px ${y}px)`,
			];
			document.documentElement.animate(
				{
					clipPath: isDarkVal ? [...clipPath].reverse() : clipPath,
				},
				{
					duration: 500,
					easing: "ease-in",
					pseudoElement: isDarkVal ? "::view-transition-old(root)" : "::view-transition-new(root)",
				}
			);
		});
	};
</script>
<style scoped lang="scss">
	@import "./index.scss";
</style>